import React, { FC, Fragment } from "react";
import { Link, useNavigate, useLocation } from "react-router-dom";
import { LOGIN_PATHNAME } from "../../router";
import { useDispatch } from "react-redux";
import { logoutReducer } from "../../store/userReducer";
// import { useRequest } from "ahooks";
// import { getUserInfoService } from "../../services/user";
import { UserOutlined } from "@ant-design/icons";
import { Button } from "antd";
import { removeToken } from "../../utils/user-token";
import useGetUserInfo from "../../hooks/useGetUserInfo";
import { isLoginOrRegister } from "../../router";
const UserInfo: FC = () => {
  const dispatch = useDispatch();
  const { username, nickname } = useGetUserInfo();
  //   console.log(username, "username");

  const nav = useNavigate();
  const { pathname } = useLocation();
  if (isLoginOrRegister(pathname)) return null;

  //退出
  function logout() {
    removeToken();
    //调用redux退出
    dispatch(logoutReducer());
    nav(LOGIN_PATHNAME);
  }
  const UserInfo = (
    <Fragment>
      <span className="text-white  ">
        <UserOutlined className="mr-2"></UserOutlined>
        {nickname}
      </span>
      <Button type="link" onClick={logout}>
        退出
      </Button>
    </Fragment>
  );
  const Login = <Link to={LOGIN_PATHNAME}>登陆</Link>;
  return <div>{username ? UserInfo : Login}</div>;
};

export default UserInfo;
